<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>gird与list切换</title>
    <style type="text/css">
        body{
            font:15px/1.3 'Open Sans', sans-serif;
            color: #5e5b64;
            background-color: #f5f5f5;
        }
        a, a:visited {
            outline:none;
            color:#389dc1;
        }
        a:hover{
            text-decoration:none;
        }
        section, footer, header, aside, nav{
            display: block;
        }
        #frame{
            width: 520px;
            margin: 50px auto;
        }
        .bar{
            background-color:#5c9bb7;
            background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
            background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
            background-image:linear-gradient(top, #5c9bb7, #5392ad);
            box-shadow: 0 1px 1px #ccc;
            border-radius: 2px;
            position:relative;
            text-align:right;
            line-height: 1;
            padding: 10px;
        }
        .cl{
            clear: left;
        }
        ul,p,h3{
            padding: 0px;
            margin: 0px;
        }
        .bar a{
            background:#4987a1 center center no-repeat;
            width:32px;
            height:32px;
            display:inline-block;
            text-decoration:none !important;
            margin-right:5px;
            border-radius:2px;
        }

        .bar a.active{
            background-color:#c14694;
        }

        .bar a.list-icon{
            background-image:url();
        }

        .bar a.grid-icon{
            background-image:url();
        }

        ul.list{
            list-style: none;
            text-align: left;
        }

        ul.list li{
            border-bottom: 1px dashed #ddd;
            padding: 8px;
            overflow: hidden;
        }

        ul.list img{
            width:100px;
            height:100px;
            float:left;
            border:none;
        }

        ul.list h3,ul.list p{
            width: 390px;
            overflow: hidden;
            margin-left: 8px;
            color:#6e7a7f;
            float:left;
        }
        ul.list h3{
            padding: 10px 0px;
        }

        ul.grid{
            list-style: none;
            text-align: left;
            float:left;
        }

        ul.grid li{
            padding: 8px;
            float:left;
        }

        ul.grid li img{
            width:244px;
            height:244px;
            display:block;
            border:none;
        }


    </style>
    <script src="../js/1.4.8/angular.js"></script>
</head>
<body>
    <div id="frame" ng-controller="myCtrl">
        <div class="bar">
            <a href="#" class="list-icon" ng-class="{active: layout == 'list'}"
               ng-click="layout = 'list'"></a>
            <a href="#" class="grid-icon" ng-class="{active: layout == 'grid'}"
               ng-click="layout = 'grid'"></a>
        </div>
        <ul ng-show="layout == 'grid'" class="grid">
            <li ng-repeat="p in pics">
                <a href="{{p.url}}" target="_blank">
                    <img ng-src="{{p.image}}"/>
                </a>
            </li>
        </ul>
        <ul ng-show="layout == 'list'" class="list">
            <li ng-repeat="p in pics">
                <a href="{{p.url}}" target="_blank">
                    <h3>{{p.title}}</h3>
                    <p>{{p.date}}</p>
                </a>
            </li>
        </ul>
    </div>
    <script tyte="text/javascript">
        var app = angular.module("app", []);
        app.controller("myCtrl",["$scope","$http",function ($scope,$http) {
            $scope.layout = 'list';
            $scope.pics = [];
            $http.get('http://qd.bokanedu.com/tgr/api/index.aspx?day=82&type=search')
                    .success(function (data, status, headers, config) {
                        $scope.pics = data;
                    })
        }]);
    </script>
</body>
</html>